import './index.less';
import React, {useEffect, useState, useRef} from 'react';
import {DeleteIcon} from '@chakra-ui/icons';
import {
    AccordionButton,
    Box,
    Fade,
    Editable,
    EditablePreview,
    EditableInput,
    AlertDialog,
    AlertDialogOverlay,
    AlertDialogContent,
    AlertDialogHeader,
    AlertDialogBody,
    AlertDialogFooter,
    Button,
    useDisclosure,
    useBoolean
} from '@chakra-ui/react';
import {ProjectItemProps} from './interface';
import useInProject from '../../../customHooks/useInProject';
import DefaultToast from '../../../utils/defaultToast';
import {ProjectAPI} from '../../../api';
const ProjectItem = (props: ProjectItemProps) => {
    const {isOpen, onOpen, onClose} = useDisclosure();
    const cancelRef = useRef(null);
    const {onAfterDelete = () => {}} = props;
    const Toast = DefaultToast();
    const [showDel, setShowDel] = useBoolean();
    const [editing, setEditing] = useBoolean(true);
    const [editValue, setEditValue] = useState(props.name);
    const setProjectName = (nextValue: string) => {
        useInProject(nextValue, (result: boolean) => {
            if (result) {
                Toast.error('该项目已存在');
                setEditValue(props.name);
            } else {
                ProjectAPI.updateProject({
                    id: props.id,
                    name: nextValue
                });
            }
        });
    };
    useEffect(() => {
        setEditValue(props.name);
    }, [props.name]);
    const deleteProject = (id: number) => {
        ProjectAPI.deleteProject(id).then((res: ProjectDir[]) => {
            onAfterDelete([...res]);
        });
    };
    return (
        <>
            <AccordionButton h="40px" onMouseLeave={setShowDel.off} onMouseEnter={setShowDel.on}>
                <Box
                    flex="1"
                    textAlign="left"
                    h="40px"
                    onBlur={setEditing.on}
                    display="flex"
                    onDoubleClick={setEditing.off}
                    justifyContent="space-between"
                    alignItems="center">
                    <Editable
                        flex="1"
                        isDisabled={editing}
                        onSubmit={setProjectName}
                        onChange={setEditValue}
                        textAlign="left"
                        value={editValue}
                        display="flex">
                        <EditablePreview />
                        <EditableInput />
                    </Editable>
                    <Fade in={showDel}>
                        <DeleteIcon
                            color="#e84118"
                            onClick={(e) => {
                                e.stopPropagation();
                                onOpen();
                            }}
                        />
                    </Fade>
                </Box>
            </AccordionButton>
            <AlertDialog
                isOpen={isOpen}
                leastDestructiveRef={cancelRef}
                onClose={onClose}
                closeOnEsc
                closeOnOverlayClick={false}>
                <AlertDialogOverlay>
                    <AlertDialogContent>
                        <AlertDialogHeader fontSize="lg" fontWeight="bold">
                            删除项目
                        </AlertDialogHeader>
                        <AlertDialogBody>确定删除? </AlertDialogBody>
                        <AlertDialogFooter>
                            <Button ref={cancelRef} onClick={onClose}>
                                取消
                            </Button>
                            <Button
                                colorScheme="red"
                                onClick={() => {
                                    deleteProject(props.id);
                                    onClose();
                                }}
                                ml={3}>
                                确定
                            </Button>
                        </AlertDialogFooter>
                    </AlertDialogContent>
                </AlertDialogOverlay>
            </AlertDialog>
        </>
    );
};
export default ProjectItem;
